<template>
  <view class="app-container">
    <!-- 主体内容区 -->
    <view class="content-wrapper">
      <!-- 左侧分类导航 -->
      <scroll-view class="sidebar" scroll-y>
        <view
          v-for="(category, index) in app_list"
          :key="index"
          class="sidebar-item"
          :class="{ active: currentCategoryIndex === index }"
          @click="switchCategory(index)"
        >
          <view class="sidebar-text">{{ category.menuName }}</view>
        </view>
      </scroll-view>

      <!-- 右侧应用列表 -->
      <scroll-view class="app-content" scroll-y>
        <!-- 分类应用区域 -->
        <view class="section-wrapper" v-if="app_list.length > 0">
          <view class="section-title">
            <text class="title-text">{{
              app_list[currentCategoryIndex].menuName
            }}</text>
          </view>

          <view class="app-grid">
            <view
              class="app-item"
              v-for="app in filteredCategoryApps"
              :key="app.url"
              @click="goPage(app.url)"
            >
              <view
                class="app-icon-wrapper"
                :style="{ backgroundColor: app.color }"
              >
                <template
                  v-if="app.icon && app.icon.startsWith('newcustom-icon-')"
                >
                  <text :class="[app.icon]" class="newcustom-icon"></text>
                </template>
                <template v-else>
                  <text :class="[app.icon]" class="custom-icon"></text>
                </template>
              </view>
              <view class="app-name">{{ app.label }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { menus } from "./app.js";
export default {
  data() {
    return {
      currentCategoryIndex: 0,
      app_list: [],
    };
  },
  computed: {
    userCenterId() {
      return this.$store.state.userInfo.userCenterId;
    },
    enterpriseScope() {
      return this.$store.state.enterprise.scope;
    },
    filteredCategoryApps() {
      if (!this.app_list.length || !this.app_list[this.currentCategoryIndex]) {
        return [];
      }
	  console.log(this.app_list);
      return this.app_list[this.currentCategoryIndex].menuList.filter((app) =>
        this.$accessCheck(this.$Access[app.access])
		
      );
    },
  },
  onLoad() {
    if (parseInt(this.$store.state.enterprise.scope) === 4) {
      this.app_list = menus.map((item) => {
        return {
          ...item,
          menuList: item.menuList.filter((menu) => menu.label !== "商品资料"),
        };
      });
    } else {
      this.app_list = menus;
    }

    // 设置所有应用图标颜色为主题色
    this.app_list.forEach((category) => {
      category.menuList.forEach((app) => {
        app.color = "#FB5904";
      });
    });
  },
  methods: {
    switchCategory(index) {
      this.currentCategoryIndex = index;
    },
    goPage(url) {
      // 检查URL是否有效
      if (!url) {
        this.$u.toast("页面链接无效");
        return;
      }

      // 使用通用的页面导航方法
      uni.navigateTo({
        url: url,
        fail: (err) => {
          // 如果导航失败，尝试使用switchTab
          uni.switchTab({
            url: url,
            fail: () => {
              // 如果switchTab也失败，则显示错误提示
              this.$u.toast("页面跳转失败");
              console.error("页面跳转失败", url, err);
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
  margin-top: 20rpx;
}

.sidebar {
  width: 180rpx;
  background-color: #f0f0f0;
  height: 100%;

  .sidebar-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &.active {
      background-color: #ffffff;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 30rpx;
        height: 40rpx;
        width: 6rpx;
        background-color: #fb5904;
        border-radius: 0 4rpx 4rpx 0;
      }

      .sidebar-text {
        color: #fb5904;
        font-weight: 500;
      }
    }

    .sidebar-text {
      font-size: 26rpx;
      color: #666666;
      text-align: center;
      padding: 0 10rpx;
    }
  }
}

.app-content {
  flex: 1;
  background-color: #ffffff;
  height: 100%;
}

.section-wrapper {
  padding: 20rpx;

  .section-title {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;

    .title-text {
      font-size: 30rpx;
      color: #333333;
      font-weight: 500;
    }
  }
}

.app-grid {
  display: flex;
  flex-wrap: wrap;

  .app-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 30rpx;

    .app-icon-wrapper {
      width: 90rpx;
      height: 90rpx;
      border-radius: 18rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;

      .custom-icon {
        font-size: 48rpx;
        color: #ffffff;
      }
      .newcustom-icon {
        font-size: 48rpx;
        color: #ffffff;
      }
    }

    .app-name {
      font-size: 26rpx;
      color: #333333;
      max-width: 140rpx;
      text-align: center;
      overflow: hidden;
    }
  }
}
</style>
